<template>
  <UserInfoComp @status-change="loginStatusChange"></UserInfoComp>
  <hr />
  <div class="menus">
    <div v-for="d in usermenu">
      <div @click="openlink(d.link)">
        <img :src="d.icon" alt="" />
        <div>{{ d.title }}</div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import UserInfoComp from '../../components/UserInfoComp.vue'
import { router } from '../../router'
import { log } from '../../ts/logger'
import { storeToRefs } from 'pinia'
import store from '../../store/index'

const { usermenu } = storeToRefs(store())

const openlink = (link: string) => {
  const url = router.resolve(link).fullPath
  // window.open(url)
  location.href = url
}

const loginStatusChange = (islogin: boolean) => {
  log.debug('登录状态变化', islogin)
}
</script>
<style scoped lang="scss">
.menus {
  width: 75vw;
  margin: 1rem auto;
  display: grid;
  column-gap: 5vw;
  row-gap: 10vh;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
  img {
    margin: 1rem;
    display: block;
    width: 80%;
    height: auto;
    transition: all 0.5s;
  }
  > div {
    // margin: 1rem;
    &:hover {
      cursor: pointer;
      img {
        transform: scale(1.1);
      }
    }
  }
}
</style>
